<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style type="text/css">-->
<!--        #box1 {-->
<!--            width: 100px;-->
<!--            height: 100PX;-->
<!--            background-color: pink;-->
<!--            position: absolute;-->
<!--        }-->
<!--    </style>-->
<!--    <script>-->
<!--        window.onload = function () {-->

<!--            // window.document-->
<!--            // window.history-->
<!--            // window.navigator-->
<!--            // window.location-->

<!--            let func = function () {-->
<!--                console.log('==> hhhh')-->
<!--            }-->

<!--            window.aaaaaaa = func-->
<!--            window.aaaaaaa()-->

<!--            console.log(window)-->

<!--            var box1 = document.getElementById("box1");-->
<!--            box1.onmousedown = function (event) {-->
<!--                event = event|| window.event;-->
<!--                var ol = event.clientX - box1.offsetLeft;-->
<!--                var ot = event.clientY- box1.offsetTop;-->
<!--                var ol = event.clientX-->
<!--                var ot = event.clientY-->
<!--                document.onmousemove = function (event) {-->
<!--                    event = event|| window.event;-->
<!--                    var left = event.clientX -ol;-->
<!--                    var top = event.clientY- ot;-->
<!--                    box1.style.left = left+"px";-->
<!--                    box1.style.top =top+"px";-->
<!--                };-->
<!--                document.onmouseup = function () {-->
<!--                    document.onmousemove = null;-->

<!--                };-->
<!--            };-->
<!--            -->
<!--        }-->
<!--    </script>-->
<!--    -->
<!--</head>-->
<!--<div  id="box1"></div>-->
<!--<body>-->

<!--</body>-->
<!--</html>-->
<!doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>JS 控制页面上下滚动及右侧浮动导航效果</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        .header{width:1000px;margin:0 auto;height:400px;background:#ccc;font-size:40px;text-align:center;line-height:400px;color:#00FFFF;}

        .content{width:1000px;margin:0 auto;}

        .cont{height:500px;}

        .cont1{background:#666666;}

        .cont2{background:#999999;}

        .cont3{background:#CCCCCC;}

        .cont4{background:#FF0000;}

        .cont5{background:#6699CC;}

        .cont h4{font-size:16px;}

        .pop1{position:absolute;top:400px;right:50px;width:100px;height:240px;border:1px #00FFFF solid;}

        .pop1 .r_nav{list-style:none;}

        .pop1 .r_nav li{width:100px;}

        .pop1 .r_nav li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}

        .pop1 .r_nav li a:hover,.pop1 .r_nav li a.cur{background:#6699CC;color:#00FFCC;}

        .pop1 .tt a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}

        .pop1 .tt a:hover{background:#6699cc;color:#00ffcc;}

        .pop{width:100px;height:240px;border:1px #00FFFF solid;position:fixed;margin:0;padding:0;top:50%;margin-top:-380px;right:50px;}

        .pop .r_nav{list-style:none;}

        .pop .r_nav li{width:100px;}

        .pop .r_nav li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}

        .pop .r_nav li a:hover,.pop .r_nav li a.cur{background:#6699CC;color:#00FFCC;}

        .pop .tt a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}

        .pop .tt a:hover{background:#6699cc;color:#00ffcc;}

    </style>

</head>

<body id="top">

<div class="header">头部！</div>

<div class="content">

    <div class="cont1 cont"><h4>周一</h4></div><!--cont1-->

    <div class="cont2 cont"><h4>周二</h4></div><!--cont2-->

    <div class="cont3 cont"><h4>周三</h4></div><!--cont3-->

    <div class="cont4 cont"><h4>周四</h4></div><!--cont4-->

    <div class="cont5 cont"><h4>周五</h4></div><!--cont5-->

</div><!--content-->

<div id="popup" class="pop1">

    <ul class="r_nav">

        <li class="lis"><a class="cur" href="javascript:;" title="">星期一</a></li>

        <li class="lis"><a href="javascript:;" title="">星期二</a></li>

        <li class="lis"><a href="javascript:;" title="">星期三</a></li>

        <li class="lis"><a href="javascript:;" title="">星期四</a></li>

        <li class="lis"><a href="javascript:;" title="">星期五</a></li>

    </ul><!--.r_nav-->

    <div class="tt"><a class="toTop" href="javascript:;" title="">Top</a></div>

</div><!--#popup-->

<script src="js/jquery1.11.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){
        var nav=(function(navObj){
            navObj.init=function(){
                this.n=0;

                this.offsetTop=[];

                this.scrolltype=true;

                this.review=function(){
                    $('#popup .lis a').eq(this.n).addClass('cur').parent().siblings().children().removeClass('cur');

                };

                for(var i=0;i<$('.content .cont').length;i++){
                    this.offsetTop.push($('.content .cont').eq(i).offset().top);

                };

                navObj.bindE();

            };

            navObj.bindE=function(){//滚动条滚动改变导航元素效果

                var self=this;//这里的this等同于上面的this

                $(window).bind('load scroll',function(){
                    var stval=$(this).scrollTop();

                    if(stval>399){//判断滚动条滚动距离大于或小于header高度时，让导航效果对应在第一个上

                        if(stval<self.offsetTop[0]){
//alert(self.offsetTop[0]);

                            self.n=0;

                        }else{
                            for(var j=0;j<self.offsetTop.length;j++){
                                if(stval>(self.offsetTop[j]+300)&& stval<self.offsetTop[j+1]){self.n=j+1;break;}//这里的300是常量

                            };

                        };

                        if(self.scrolltype===true){
                            self.review();

                        }

                        $('#popup').removeClass('pop1').addClass('pop');

                    }else{
                        $('#popup').removeClass('pop').addClass('pop1');

                        $('#popup li a').parent('li:first-child').children().addClass('cur').parent().siblings().children().removeClass('cur');

                    };

                });

                $('.toTop').click(function(){//    点击返回首页Top按钮实现页面不刷新返回顶部

                    $('html, body').animate({scrollTop:0+'px'},500);

                    $('#popup li a').parent('li:first-child').children().addClass('cur').parent().siblings().children().removeClass('cur');

                });

                $('#popup .lis').delegate('a','click',function(e){//   点击导航定位页面内容

                    self.n=$(this).index('#popup .lis a');

                    self.scrolltype=false;

                    self.review();

                    var t=self.offsetTop[self.n];

                    $('html,body').animate({scrollTop:t},500,function(){//   滚动条滚动 页面不同内容的offsetTop值实现按钮对应效果

                        self.scrolltype=true;

                        $(self.n).addClass('cur').parent().siblings().children().removeClass('cur');

                    });

                });

            };

            return navObj;

        })(window.navObj || {});

        nav.init();

    });

</script>

</body>

</html>